<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>grid使用</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
		<style>
		</style>
		<script src="js/jquery1.10.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.mobile-1.4.5.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div data-role="page" data-fullscreen="true" id="one" data-theme="a">
			<div data-role="header">
				<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
				<h1>grid使用</h1>
			</div>
			<div data-role="ui-content">

				<div class="ui-grid-b">
					<div class="ui-block-a">
						<div class="ui-bar ui-bar-a" style="height:60px">Block A</div>
					</div>
					<div class="ui-block-b">
						<div class="ui-bar ui-bar-a" style="height:60px">Block B</div>
					</div>
					<div class="ui-block-c">
						<div class="ui-bar ui-bar-a" style="height:60px">Block C</div>
					</div>
				</div>
				<!-- /grid-b -->

				<div class="ui-grid-d">
					<div class="ui-block-a">
						<div class="ui-bar ui-bar-a" style="height:60px">Block A</div>
					</div>
					<div class="ui-block-b">
						<div class="ui-bar ui-bar-a" style="height:60px">Block B</div>
					</div>
					<div class="ui-block-c">
						<div class="ui-bar ui-bar-a" style="height:60px">Block C</div>
					</div>
					<div class="ui-block-d">
						<div class="ui-bar ui-bar-a" style="height:60px">Block D</div>
					</div>
					<div class="ui-block-e">
						<div class="ui-bar ui-bar-a" style="height:60px">Block E</div>
					</div>
				</div>
				<!-- /grid-c -->

				<div class="ui-grid-a">
					<div class="ui-block-a"><a class="ui-shadow ui-btn ui-corner-all">Previous</a>
					</div>
					<div class="ui-block-b"><a class="ui-shadow ui-btn ui-corner-all">Next</a>
					</div>
				</div>
				<div class="ui-grid-solo">
					<div class="ui-block-a">
						<input value="More" type="button">
					</div>
				</div>

			</div>
			<div data-role="footer" data-position="fixed">
				<a>test</a>
			</div>
		</div>

	</body>

</html>